
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Divider, Collapse, Card, Row, Col, Table} from 'antd';
import {formatDateTime, conventEnumValueToString, formatAmount} from '../utils';
import {partOrderPriceTerms} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import styles from './style.css';
import {FILES_API} from '../constants';
const basePath = fetch.basePath || '';
export const fileApi = `${basePath}${FILES_API.files}`;


/* eslint-disable react/prefer-stateless-function */
class Detail extends React.PureComponent {
    render() {
        return (
            <div>
                <Card>
                    <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.order.title',
                        defaultMessage: '货运委托书信息'
                    })}</Col>
                    <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.partContractInvoiceCode',
                                defaultMessage: '备件箱单发票编号'
                            })}>
                            {this.props.detail.partContractInvoiceCode}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.exporter',
                                defaultMessage: '卖方'
                            })}>
                            {this.props.detail.exporter}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.importer',
                                defaultMessage: '买方'
                            })}>
                            {this.props.detail.importer}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.loadingPort',
                                defaultMessage: '起运地'
                            })}>
                            {this.props.detail.loadingPort}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.destinationPort',
                                defaultMessage: '目的地'
                            })}>
                            {this.props.detail.destinationPort}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.priceTerms',
                                defaultMessage: '价格条款'
                            })}>
                            {conventEnumValueToString(partOrderPriceTerms, this.props.detail.priceTerms)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.shippingFee',
                                defaultMessage: '运费价格'
                            })}>
                            {formatAmount(this.props.detail.shippingFee)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.carrier',
                                defaultMessage: '载体'
                            })}>
                            {this.props.detail.carrier}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.importerCantact',
                                defaultMessage: '买方联系人'
                            })}>
                            {this.props.detail.importerCantact}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.importerNumber',
                                defaultMessage: '买方电话'
                            })}>
                            {this.props.detail.importerNumber}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.contactEmail',
                                defaultMessage: '联系人电子邮件'
                            })}>
                            {this.props.detail.contactEmail}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.contactFax',
                                defaultMessage: '联系人传真'
                            })}>
                            {this.props.detail.contactFax}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.notifyParty',
                                defaultMessage: '通知方'
                            })}>
                            {this.props.detail.notifyParty}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.forwarder',
                                defaultMessage: '货代名称'
                            })}>
                            {this.props.detail.forwarder}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.forwarderContact',
                                defaultMessage: '货代联系人'
                            })}>
                            {this.props.detail.forwarderContact}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.forwarderNumber',
                                defaultMessage: '货代电话'
                            })}>
                            {this.props.detail.forwarderNumber}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.forwarderFax',
                                defaultMessage: '货代传真'
                            })}>
                            {this.props.detail.forwarderFax}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dischargePort',
                                defaultMessage: '卸货港'
                            })}>
                            {this.props.detail.dischargePort}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.createTime',
                                defaultMessage: '订舱制单'
                            })}>
                            {formatDateTime(this.props.detail.createTime)}
                        </Description>
                    </DescriptionList>
                    <DescriptionList col={1} className={styles.mgtp} size="large">
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.info.remark',
                            defaultMessage: '备注'
                        })}>
                            {this.props.detail.remark}
                        </Description>
                    </DescriptionList>
                    <Divider />
                    <DescriptionList size="large" title={this.props.intl.formatMessage({
                        id: 'commonDetail.gatherInfo.title',
                        defaultMessage: '委托书汇总'
                    })}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.packingListTotal',
                                defaultMessage: '箱数'
                            })}>
                            {this.props.detail.packingListTotal}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.grossWeightTotal',
                                defaultMessage: '毛重'
                            })}>
                            {this.props.detail.grossWeightTotal}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.volumeTotal',
                                defaultMessage: '体积'
                            })}>
                            {this.props.detail.volumeTotal}
                        </Description>
                    </DescriptionList>
                    <DescriptionList col={1} className={styles.mgtp} size="large">
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.info.shippingMark',
                            defaultMessage: '唛头'
                        })}>
                            {this.props.detail.shippingMark}
                        </Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.info.description',
                            defaultMessage: '货物描述'
                        })}>
                            {this.props.detail.description}
                        </Description>
                    </DescriptionList>
                    <Divider />
                    {this.props.detail.companySeal ? <Card
                        hoverable
                        className={styles.cardImg}
                        title="Company Seal"
                        cover={<img src={`${fileApi}/${this.props.detail.companySeal}`} />}>
                    </Card> : null}
                </Card>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDetail: PropTypes.bool,
    operations: PropTypes.any,
};
export default injectIntl(Detail);
